<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	p{
		line-height: 22px;
		font-size: 20px;
		font-family: 微软雅黑;

	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		// $('#one').css({'color':'red','font-size':'40px'});

		// #hd>p 选择的是#hd里面的儿子辈的p标签
		// $('#hd>p').css({'color':'red','font-size':'40px'});

		// #one+p 选择的是紧邻在#one元素后面的p标签
		// $('#one+p').css({'color':'red','font-size':'40px'});

		// #one~p 选择的是#one后面的所有p标签
		// $('#one~p').css({'color':'red','font-size':'40px'});

		// #hd p:first 选择#hd里面的第一个p标签
		// $('#hd p:first').css({'color':'red','font-size':'40px'});

		// #hd p:not(#one) 选择的是#hd里面的p标签，但是不包括#one
		// $('#hd p:not(#one)').css({'color':'red','font-size':'40px'});

		// #hd p:even 找#hd里面索引值是偶数的p标签
		// $('#hd p:even').css({'color':'red','font-size':'40px'});

		// #hd p:eq(2) 选择#hd里面索引值是2号的p标签
		// $('#hd p:eq(2)').css({'color':'red','font-size':'40px'});

		// #hd p:gt(1) 选择#hd中索引值大于1的p标签
		// $('#hd p:gt(1)').css({'color':'red','font-size':'40px'});


		// #hd p:contains(盾5) 选择的是#hd里面内容包含 盾5 的p标签
		// $('#hd p:contains(盾5)').css({'color':'red','font-size':'40px'});

		// #hd p:empty 选择的是#hd中空的p标签
		// $('#hd p:empty').css({'width':'500px','height':'150px','background':'purple'});

		// #hd p:parent 选择的是#hd中非空的p标签
		// $('#hd p:parent').css({'color':'red','font-size':'40px'});

		// #hd p:has(span) 选择#hd里面包含span元素的p标签
		// $('#hd p:has(span)').css({'color':'red','font-size':'40px'});

		// #hd p[class] 选择的是#hd里面有class属性的p标签
		// $('#hd p[class]').css({'color':'red','font-size':'40px'});


		// #hd p[class=hs] 选择的是class属性为hs的元素
		// $('#hd p[class=hs]').css({'color':'red','font-size':'40px'});


		// #hd p[class^=h] 选择的是#hd里面class属性值以h开头的元素
		// $('#hd p[class^=h]').css({'color':'red','font-size':'40px'});

		// #hd p[class*=i]  选择的是#hd里面 class属性值中包含i的p标签
		// $('#hd p[class*=i]').css({'color':'red','font-size':'40px'});

		// #hd p[name][class^=h] 选择的是#hd里面有name属性，并且class值是以h开头的p标签
		// $('#hd p[name][class^=h]').css({'color':'red','font-size':'40px'});

		// div p:nth-child(3) 选择的是div中的p标签的父级元素中的 第三个 p标签
		$('div p:nth-child(3)').css({'color':'red','font-size':'40px'});


	})
</script>
</head>

<body>

<div id="hd">
	<p>后盾网 人人做后盾0</p>
	<p id="one">后盾网 人人做后盾1</p>
	<p class="hs">后盾网 人人做后盾2</p>
	<p>后盾网 人人做后盾3 <span>我们是p里面的span</span></p>
	<p class="hs" name='houdun'>后盾网 人人做后盾4</p>
	<p>后盾网 人人做后盾5 <span>我们是p里面的span</span></p>
	<p class='six'>后盾网 人人做后盾6</p>
	<p>后盾网 人人做后盾7</p>
	<div>
		<p>我是#hd的孙子辈的p标签</p>
	</div>
	<p></p>
	<p></p>
</div>

<div>
	<p>我们是第二个div中的p标签0</p>
	<p>我们是第二个div中的p标签1</p>
	<p>我们是第二个div中的p标签2</p>
	<p>我们是第二个div中的p标签3</p>
	<p>我们是第二个div中的p标签4</p>
</div>



</body>
</html>
